import {defineComponent, VNode} from 'vue'
import {ConnectorModuleComponentNameEnum} from '@src/modules/connector/model/enum.ts'
import '@src/modules/connector/view/list/components/headerView/headerView.scss'
import platform from '@src/util/platform.ts'
/* util */
import { t } from '@src/locales'
// import { getLocalesOssUrl } from '@src/util/assets'
// /* img */
// const trigger_right = getLocalesOssUrl("/trigger_right.png")
// const trigger_bg = getLocalesOssUrl("/trigger_bg.png")
import trigger_right from '@src/assets/img/trigger_right.png'
import trigger_bg from '@src/assets/img/trigger_bg.png'

export default defineComponent({
  // @ts-ignore
  name: ConnectorModuleComponentNameEnum.ConnectorListViewHeaderView,
  props: {
    isNewTrigger: {
      type: Boolean,
      default: false
    }
  },
  setup() {
  },
  methods: {
    /**
     * @description 使用手册点击跳转
     */
    useDocHandler() {
      platform.openLink('https://doc.shb.ltd/shb_xoqazk/ia4qctp2ly559d1m/gre7yumc5sz4ewod/dklg7gkm64cya8l4.html')
    },
    /**
     * @description 新版触发器使用手册
     */
    useNewDocHandler() {
      platform.openLink('https://doc.shb.ltd/shb_xoqazk/ia4qctp2ly559d1m/eka8tf9wv8x43arx/dklg7gkm64cya8l4.html')
    },
    clickDocHandler() {
      if (this.isNewTrigger) {
       this.useNewDocHandler() 
      } else {
        this.useDocHandler()
      }
    }
  },
  render() {
    return (
      <div class={ConnectorModuleComponentNameEnum.ConnectorListViewHeaderView} style={{backgroundImage: `url(${trigger_bg})`}}>
        <div class={'container'}>
          <h1>{t(("trigger.table.title"))}</h1>
          <p>{t(("trigger.table.message"))}</p>
          <div class="useDoc">
            <el-button type={'plain'} onClick={() => this.clickDocHandler()}>{t(("trigger.table.useDoc"))}</el-button>
          </div>
        </div>
        <div class={'right trigger-right-kf'}>
          <img src={trigger_right} alt=""/>
        </div>
      </div>
    )
  }
})